<template>
  <div class="editSex">
    <van-popup
      :value="userSex"
      position="bottom"
      :style="{ height: '40%' }"
      style="overflow-y: hidden"
      @click-overlay="$emit('input', false)"
    >
      <van-area
        :area-list="areaList"
        :columns-num="1"
        :value="userInfoGender"
        @cancel="handleBack"
        @confirm="sex"
      />
    </van-popup>
  </div>
</template>

<script>
import { auEdit } from '@/api/my.js'
export default {
  name: 'EditSex',
  props: {
    userSex: {
      type: Boolean,
      default: false
    },
    userInfoGender: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'userSex'
  },
  data () {
    return {
      areaList: {
        province_list: {
          0: '未知',
          1: '男',
          2: '女'
        }
      }
    }
  },
  methods: {
    // 调用接口修改性别
    async sex (data) {
      const gen = data[0].code
      const res = await auEdit({ gender: gen })
      if (res.code === 200) {
        this.$toast.success('修改成功')
        this.handleBack()
      }
    },
    // 关闭弹窗
    handleBack () {
      this.$emit('refreshPage')
      this.$emit('input', false)
    }
  }
}
</script>

<style></style>
